<template>
  <div id="headBox" class="pageNormalBackground">
    <headerT title="预约产品" />
    <div class="headMarginTop boxMain" style="height:100vh">
        <div class="everyBlockBgcolor pwdBox">
            <div class="pwdBoxList displayFlex">
                <P class="title">手机号</P>
                <input v-model="phone" placeholder="请输入预约的手机号" />
            </div>
            <div class="pwdBoxList displayFlex">
                <P class="title">预约消费码</P>
                <input type="text" v-model="code" placeholder="请输入已提交预约消费码" />
            </div>
            
        </div>
        <div class="btnsave" @click="seeYuyue">查看</div>
    </div>
  </div>
</template>

<script>
import headerT from "@/components/header";
export default {
  components: {
    headerT
  },
  name: "",

  data() {
    return {
      phone:'',
      code:''
    };
  },
  created() {},
  watch: {},

  methods: {
    //查看预约
    seeYuyue(){
      if(this.phone==''){
        this.$vux.toast.text("请输入电话号码！", "top");
        return;
      }
      let myreg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
      if(myreg.test(this.phone)==false){
        this.$vux.toast.text('请输入正确的手机号！', 'top')
        return;
      }
      if(this.code==''){
        this.$vux.toast.text("请输入已提交预约消费码！", "top");
        return;
      }
      this.$tools.goPage_query('/yuyueSuccess',{phone:this.phone,code:this.code,yuyueType:2})
      
    },
  }
};
</script>

<style lang="less" rel="stylesheet/less" type="text/css" scoped>
@colorRed: #f64135;
@fontsize32: 0.32rem;
#headBox {
 
  .boxMain {
    .pwdBox{
      box-sizing: border-box;
      height: 3.23rem;
      padding: 0 0.34rem;
      .pwdBoxList{
        height: 1.6rem;
        border-bottom: 1px solid #F6F6F6;
        font-size: 0.32rem;
        color: #4E4E4E;
        .title{
          width: 2rem;
        }
        input{
          padding: 0.3rem 0;
          border: none;
          &::-webkit-input-placeholder{
              color: #C8C8C8;
          }
        }
        
        .sendCode{
          font-size: 0.34rem;
          color: @colorRed;
          padding: 0.3rem 0.2rem 0.3rem 0.4rem;
        }
      }
      
    }
    
    .btnsave{
      height: 1.13rem;
      background: linear-gradient(
        90deg,
        rgba(246, 65, 53, 1) 0%,
        rgba(255, 205, 88, 1) 100%
      );
      box-shadow: 0rem 0rem 0rem rgba(255, 112, 79, 0.4);
      border-radius: 1rem;
      font-size: 0.39rem;
      color: #ffffff;
      text-align: center;
      line-height: 1.13rem;
      font-weight:bold;
      margin: 1.13rem 0.89rem;
    }
  }
}
</style>
